<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo13-echart展示收支线性图表</title>
  <script src="../plugins/echart/echarts.min.js"></script>
  <script src="../plugins/vue/axios.min.js"></script>
  <script src="../plugins/vue/vue.min.js"></script>

</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
  <div id="app">

  </div>


</body>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));



   let vue =  new Vue({
      el:"#app",
      data:{

      },
      methods:{

      },
      created(){
          //发起一个前端请求，将图表中展示的数据，查询回来
          axios.get("/queryAccountEchartData").then(res=>{
              // 指定图表的配置项和数据
              var option = {
                  title: {
                      text: 'ECharts 入门示例'
                  },
                  tooltip: {},
                  legend: {
                      data: ['支出情况']
                  },
                  xAxis: {
                      data: res.data.xAxis
                  },
                  yAxis: {},
                  series: [
                      {
                          name: '支出情况',
                          type: 'bar',
                          data: res.data.seris
                      }
                  ]
              };


              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);


          })



      }
    })


</script>



</html>